import { LogoutOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons';
import { Avatar, Menu, message, Spin } from 'antd';
import React from 'react';
import { history } from 'umi';
import Api from '@/api';
import HeaderDropdown from '../HeaderDropdown';
import styles from './index.less';
import config from '@/config/index'

class AvatarDropdown extends React.Component {
  state = {
    UserList: [],
    userData: {},
  };

  componentDidMount() {
    const token = sessionStorage.getItem('TOKEN');
    const USER = sessionStorage.getItem('USER') || {};
    const USERLIST = sessionStorage.getItem('USERLIST') || {};
    if (!token) {
      // history.push('/');
      history.push('/content/lanMu');
    }
    if (JSON.stringify(USER) === '{}') {
      this.GetOfficialList();
    } else {
      this.setState({
        userData: JSON.parse(USER),
        UserList: JSON.parse(USERLIST),
      });
    }
  }

  GetOfficialList = async () => {
    await Api.User.GetOfficialList({}).then((res) => {
      if (res.Ret === 0 && res.Data.length) {
        this.setState({
          UserList: res.Data,
          userData: res.Data[0],
        });
        sessionStorage.setItem('USER', JSON.stringify(res.Data[0])); // 机构ID
        sessionStorage.setItem('USERLIST', JSON.stringify(res.Data)); // 机构ID
      } else {
        message.error(res.Msg);
      }
    });
  };

  onMenuClick = (value) => {
    sessionStorage.setItem('USER', JSON.stringify(value));
    this.setState({
      userData: value,
    });
    window.location.reload();
  };

  Back = () => {
    sessionStorage.removeItem('USER');
    sessionStorage.removeItem('USERLIST');
    sessionStorage.removeItem('TOKEN');
    history.push('/');
  };
  render() {
    const isback = sessionStorage.getItem('ISBACK') || '';
    const { UserList, userData } = this.state;
    const menuHeaderDropdown = (
      <Menu className={styles.menu} selectedKeys={[]}>
        {UserList.map((item) => {
          return (
            <Menu.Item key={item.OfficialID} onClick={() => this.onMenuClick(item)}>
              <UserOutlined />
              <span>{item.Name}</span>
            </Menu.Item>
          );
        })}
        <Menu.Divider />
        {isback ? '' : (
          <Menu.Item key="logout" onClick={() => this.Back()}>
            <LogoutOutlined />
            退出登录
          </Menu.Item>
        )}
      </Menu>
    );

    return UserList.length ? (
      <HeaderDropdown overlay={menuHeaderDropdown}>
        <span className={`${styles.action} ${styles.account}`}>
          <Avatar
            style={{ backgroundColor: '#87d068', marginRight: '10px' }}
            size="small"
            icon={<UserOutlined />}
          />
          <a>{userData.Name}</a>
        </span>
      </HeaderDropdown>
    ) : (
        <span className={`${styles.action} ${styles.account}`}>
          <Spin
            size="small"
            style={{
              marginLeft: 8,
              marginRight: 8,
            }}
          />
        </span>
      );
  }
}

export default AvatarDropdown;
